<!--宿舍信息-->
<template>
	<div class="wrap">
		<!-- 宿舍管理头部搜索部分 -->
		<el-row>
			<el-col :span="13">
				<el-row :gutter="20">
					<el-col :span="7">
						<span>寝室号：</span>
						<el-input v-model.number="dorNumber" />
					</el-col>
					<el-col :span="3">
						<el-button class="btn" @click="submitSearch">
							<el-icon><Search /></el-icon>
							查询
						</el-button>
					</el-col>
					<el-col :span="3">
						<el-button class="btn" @click="resetSearch">
							<el-icon><Setting /></el-icon>
							重置
						</el-button>
					</el-col>
				</el-row>
			</el-col>
		</el-row>

		<el-row class="container">
			<template v-for="(room, index) in roomLists" :key="room">
				<DomitoryCard :room-id="room?.dorNumber" :status="getStatus[index]" />
			</template>
		</el-row>
		<el-row class="pagination">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="pageSizes"
				small="small"
				:background="true"
				layout="total, sizes, prev, pager, next"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</el-row>
	</div>
</template>

<script setup>
import DomitoryCard from '@/components/mod/DomitoryCard.vue'

import { getAllRoomInfo, getBuildOneRoom } from '@/utils/axios/domiRequests'
import { getBuildInfoOneBuild } from '@/utils/axios/getTotal'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { useUserStore } from '@/stores/userStore'
import { ElMessage } from 'element-plus'
import { debounce } from '@/utils/tools'
import useRegStore from '@/stores/useReg'

const { handleCheckDorNumber } = useRegStore()

const userStore = useUserStore()

const dorNumber = ref()

const currentPage = ref(1)
const pageSize = ref(24)
const pageSizes = reactive([24, 48, 80, 160])


// 房间总数
const total = ref(0)
// 模拟某栋宿舍楼的所有房间信息
const roomLists = ref([])

const getStatus = computed(() => {
	let status = []
	roomLists.value.forEach((item) => {
		item?.capacity - item?.already === 0 ? status.push('已住满') : status.push('未住满')
	})
	return status
})

// 处理重置按钮
const resetSearch = debounce(async () => {
	await init()
})
// 处理搜索
const submitSearch = debounce(async () => {
	if(!handleCheckDorNumber(dorNumber.value)) return
	if (!dorNumber.value) {
		if (!roomLists.value.length) {
			let { data } = await getAllRoomInfo({ currentPage: currentPage.value, pageSize: pageSize.value })

			let res = await getBuildInfoOneBuild({ buildId: parseInt(userStore.userInfo.buildId) })
			roomLists.value = data
			total.value = res.data
			return
		} else return ElMessage.warning({ message: '请输入搜索条件' })
	}

	if (dorNumber.value < 101 || dorNumber.value > 580)
		return ElMessage.warning({ message: '请输入101-580的房间号', duration: 1000 })
	let { data } = await getBuildOneRoom({ dorNumber:parseInt(dorNumber.value) })
	roomLists.value = [data]
	total.value = [data].length
})

const handleSizeChange = async (val) => {
	let { data } = await getAllRoomInfo({ currentPage: currentPage.value, pageSize: val })
	roomLists.value = data
}
const handleCurrentChange = async (val) => {
	let { data } = await getAllRoomInfo({ currentPage: val, pageSize: pageSize.value })
	roomLists.value = data
}

async function init() {
	let { data } = await getAllRoomInfo({ currentPage: currentPage.value, pageSize: pageSize.value })
	roomLists.value = data
	let res = await getBuildInfoOneBuild({ buildId: parseInt(userStore.userInfo.buildId) })
	total.value = res.data
}

onMounted(async () => {
	await init()
})
</script>

<style scoped>
.wrap {
	position: relative;
}

.el-input {
	width: 100px;
}

.btn {
	background: rgb(0, 202, 237);
	color: #ffff;
}

.container {
	margin-top: 30px;
	gap: 20px;
}
</style>
